<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form label-width="140px" :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<el-row :gutter="10">
					<el-col :span="5">
						<el-form-item label="申请人：" prop="renter1">
							<el-input clearable v-model="listQuery.renter1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="房屋地址：" prop="Addr">
							<el-input clearable v-model="listQuery.Addr"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="业务编号：" prop="FCode">
							<el-input clearable v-model="listQuery.FCode"></el-input>
						</el-form-item>
					</el-col>
					<div v-show="isSearch">
						
						<el-col :span="5">
							<el-form-item label="合同编号：" prop="ContractNo">
								<el-input clearable v-model="listQuery.ContractNo"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="管理部(分中心)核对时间：" prop="FGZManagerDate" label-width="240px">
								<el-date-picker clearable v-model="listQuery.FGZManagerDate" type="date" placeholder="年/月/日">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="区住建委核查时间：" prop="QGSDate" label-width="170px">
								<el-date-picker clearable v-model="listQuery.QGSDate" type="date" placeholder="年/月/日">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</div>

					<el-col :span="5">
						<div>
							<el-button size="mini" type="primary" @click="chaxun">查询</el-button>
							<el-button size="mini" @click="resetForm">重置</el-button>
							<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleAddUser('登记')">过户登记</el-button>
			<el-button type="primary" size="mini" @click="handleout">导出</el-button>
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
				</el-table-column>

				<el-table-column align="center" label="业务编号" prop="gcode">
				</el-table-column>

				<el-table-column align="center" label="申请人" prop="renter1">
				</el-table-column>

				<el-table-column align="center" label="房屋地址" prop="addr">
				</el-table-column>

				<el-table-column align="center" label="合同编号" prop="contractno">
				</el-table-column>

				<el-table-column align="center" label="产别" prop="realway">
				</el-table-column>

				<el-table-column align="center" label="房管站核实时间" prop="fgzmanagerdate">
					<template slot-scope="scope">
						{{scope.row.fgzmanagerdate?scope.row.fgzmanagerdate.split(' ')[0]:''}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="状态" prop="state">
					<template slot-scope="scope">
						{{scope.row.state==-1?'区住建委退回':scope.row.state==-2?'抽查不通过':scope.row.state=='00'?'未提交':
						scope.row.state==10?'数据录入完毕':scope.row.state==20?'等待区住建委核查':scope.row.state==40?'抽查通过':
						scope.row.state==50?'区住建委核查通过':''}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="340">
					<template slot-scope="scope">
						<el-button v-if="scope.row.state=='00'" type="text" size="mini" @click="handleTijiao(scope.row.gid)">提交</el-button>
						<el-button v-if="scope.row.state=='10'||scope.row.state==-1" type="text" size="mini" @click="handleAddUser('房管',scope.row.gid)">房管站审核</el-button>
						<el-button v-if="scope.row.state=='20'||scope.row.state==-2" type="text" size="mini" @click="handleAddUser('复核',scope.row.gid)">区建委审核</el-button>
						<el-button v-if="scope.row.state=='50'" type="text" size="mini" @click="handleAddUser('审核',scope.row.gid)">抽查</el-button>
						<el-button type="text" size="mini" @click="handleAddUser('修改',scope.row.gid)">修改</el-button>
						<el-button type="text" size="mini" @click="handleAddUser('详情',scope.row.gid)">详情</el-button>
						<el-button type="text" size="mini" @click="handleDelete(scope.row.gid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>


			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		guohuList,
		addGuohu,
		guohuSubmit,
		guohuData,
		updGuohu,
		delGuohu,
		getRent
	} from '@/api/management'
	import managementFileUpload from '@/components/managementFileUpload.vue';
	export default {
		name: "managementjinghuguanli",
		components: {
			managementFileUpload
		},
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					State: '',
					renter1: '',
					Addr: '',
					FCode: '',
					FGZManagerDate: '',
					QGSDate: ''
				},
				total: 0,
				list: [],
				addQuery: {
					memo: '',
					relation: '',
					reason: '',
					idcard1: '',
					renter1: '',
					mixarea: '',
					singlearea: '',
					roomno: '',
					roomcount: '',
					realway: '',
					addr: '',
					renter1: '',
					renteridcard: '',
					gcode: '',
					ImgUpload:[],
					material: '否',
					disagree: '否',
					owe: '否',
					contract: '否',
					destroy: '否',
					city: '否',
					cid:''
				},
				rules: {
					gcode: [
						{ required: true, message: '请输入业务编号', trigger: 'blur' }
					],
					renter1: [
						{ required: true, message: '请输入承租人', trigger: 'blur' }
					],
					renteridcard: [
						{ required: true, message: '请输入承租人身份证号', trigger: 'blur' }
					],
					addr: [
						{ required: true, message: '请输入房屋地址', trigger: 'blur' }
					],
					realway: [
						{ required: true, message: '请输入产别', trigger: 'blur' }
					],
					roomcount: [
						{ required: true, message: '请输入间数', trigger: 'blur' }
					],
					roomno: [
						{ required: true, message: '请输入间号', trigger: 'blur' }
					],
					singlearea: [
						{ required: true, message: '请输入独用', trigger: 'blur' }
					],
					mixarea: [
						{ required: true, message: '请输入伙用', trigger: 'blur' }
					],
					renter1: [
						{ required: true, message: '请输入申请人', trigger: 'blur' }
					],
					idcard1: [
						{ required: true, message: '请输入申请人身份证', trigger: 'blur' }
					],
					reason: [
						{ required: true, message: '请输入过户原因', trigger: 'blur' }
					],
					relation: [
						{ required: true, message: '请输入与承租人关系', trigger: 'blur' }
					],
					memo: [
						{ required: true, message: '请输入备注', trigger: 'blur' }
					]
				},
				fuheQuery: {
					qgsview: '',
					qgscheck: '',
					qgsdate: ''
				},
				shenheQuery: {
					zgsdate: '',
					zgsview: '',
					zgscheck: ''
				},
				newAddQuery: {},
				listLoading: false,
				dialogVisible: false,
				shenheVisible: false,
				shenheName: '经营管理意见',
				type: '',
				uploadDialogVisible: false,
				dialogName: '',
				typeName: '',
				gid:'',
				isSearch:false
			};
		},

		computed: {},

		mounted() {
			this.newAddQuery = JSON.stringify(this.addQuery)
			this.guohuList()
		},

		methods: {
			shenheButton(type) {
				this.shenheName = type
			},
			chaxun() {
				this.guohuList()
			},
			guohuList() {
				this.listLoading = true;
				let data = {
					pageNum: this.listQuery.pageNum,
					pageSize: this.listQuery.pageSize,
					State: '50',
					renter1: this.listQuery.renter1,
					Addr: this.listQuery.Addr,
					FCode: this.listQuery.FCode,
					FGZManagerDate: this.listQuery.FGZManagerDate ? dayjs(this.listQuery.FGZManagerDate).format(
						'YYYY-MM-DD HH:mm:ss') : '',
					QGSDate: this.listQuery.QGSDate ? dayjs(this.listQuery.QGSDate).format('YYYY-MM-DD HH:mm:ss') : ''
				}
				guohuList(data).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
					this.listLoading = false;
				});
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.guohuList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.guohuList()
			},

			resetForm() {
				this.listQuery.pageNum = 1,
					this.listQuery.pageSize = 20,
					this.listQuery.State = '',
					this.listQuery.renter1 = '',
					this.listQuery.Addr = '',
					this.listQuery.FCode = '',
					this.listQuery.FGZManagerDate = '',
					this.listQuery.QGSDate = ''
			},
			// 提交
			handleTijiao(gid) {
				this.$confirm('请确认是否提交当前过户申请至“区公司”复核？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						GID: gid,
						FGZCheck:localStorage.getItem('username')
					}
					guohuSubmit(data).then(res => {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
						this.guohuList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交'
					});
				});
			},

			handleAddUser(name, gid) {
				this.gid = gid
				if (name == '复核') {
					this.dialogName = '区公司复核过户'
					this.shenheName = '区住房建设行政主管部门意见'
				} else if (name == '审核') {
					this.dialogName = '总公司审核过户'
					this.shenheName = '抽查情况'
				} else if (name == '修改') {
					this.dialogName = '过户修改'
					this.shenheName = ''
				} else if (name == '登记') {
					this.dialogName = '过户登记'
					this.shenheName = ''
				} else if (name == '详情') {
					this.dialogName = '详情'
					this.shenheName = ''
				} else if (name=='房管'){
					this.dialogName = '房管站审核'
				}
				this.typeName = name
				this.$router.push({
				  path: '/management/chengzuhuguanli/guohuguanliluru',
				  query: { dialogName: this.dialogName,gid:gid}
				})
			},
			// 保存
			save() {
				
				this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (this.dialogName == '过户登记') {
						this.addGuohu()
					} else if (this.dialogName == '过户修改' || this.dialogName == '区公司复核过户' || this.dialogName == '总公司审核过户') {
						this.updGuohu()
					}
				} else {
					console.log('验证失败！');
					return false;
					}
				}); 
			},
			// 登记
			addGuohu() {
				let data = this.addQuery
				this.listLoading = true;
				addGuohu(data).then(res => {
					this.rester()
					this.listLoading = false;
					this.shenheVisible = false
					this.guohuList()
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.listQuery = {
						...currentData
					};
				});
			},
			// 修改
			updGuohu() {
				let data
				if (this.dialogName == '过户修改') {
					data = this.addQuery
				} else if (this.dialogName == '总公司审核过户') {
					data = this.shenheQuery
					if (data.zgsdate) {
						data.zgsdate = dayjs(data.zgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				} else if (this.dialogName == '区公司复核过户') {
					data = this.fuheQuery
					if (data.qgsdate) {
						data.qgsdate = dayjs(data.qgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				}
				data.gid = this.gid
				this.listLoading = true;
				updGuohu(data).then(res => {
					console.log(res)
					this.rester()
					this.listLoading = false;
					this.shenheVisible = false
					this.guohuList()
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			// 重置
			rester() {
				this.addQuery = JSON.parse(this.newAddQuery)
			},
			handleDelete(gid) {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						GID: gid
					}
					delGuohu(data).then(res => {
						console.log(res)
						this.guohuList()
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 详情
			guohuData() {
				let data = {
					GID: this.gid
				}
				guohuData(data).then(res => {
					console.log(res)
					this.addQuery = res.data
					this.addQuery.jizumianji = res.data.singlearea + res.data.mixarea
					this.fuheQuery.qgsview = res.data.qgsview,
						this.fuheQuery.qgscheck = res.data.qgscheck,
						this.fuheQuery.qgsdate = res.data.qgsdate
					this.shenheQuery.zgsdate = res.data.zgsdate,
						this.shenheQuery.zgsview = res.data.zgsview,
						this.shenheQuery.zgscheck = res.data.zgscheck
				})
			},
			createcID(){
				if(this.addQuery.cid){
					let data = {
						cid:this.addQuery.cid
					}
					getRent(data).then(res=>{
						console.log(res)
						this.addQuery.cid = res.data.contractid
						this.addQuery.renter1 = res.data.renter
						this.addQuery.Addr = res.data.address
					})
				}else{
					this.$message({
					  type: 'success',
					  message: '请输入合同号!'
					})
				}
			},
			
			
			// 扫描件上传
			handleUploadScan() {
				console.log(1)
				this.uploadDialogVisible = true;
			},
			uploadClose(){
				this.uploadDialogVisible = false
			},
			uploadConfirm(fileList){
				let ImgUpload = []
				fileList.forEach((item,index)=>{
					ImgUpload.push(item.response.data.url)
				})
				this.addQuery.ImgUpload = JSON.stringify(ImgUpload)
				this.uploadDialogVisible = false
			},
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							pageNum: this.listQuery.pageNum,
							pageSize: this.listQuery.pageSize,
							State: this.listQuery.State,
							renter1: this.listQuery.renter1,
							Addr: this.listQuery.Addr,
							FCode: this.listQuery.FCode,
							FGZManagerDate: this.listQuery.FGZManagerDate ? dayjs(this.listQuery.FGZManagerDate).format(
								'YYYY-MM-DD HH:mm:ss') : '',
							QGSDate: this.listQuery.QGSDate ? dayjs(this.listQuery.QGSDate).format('YYYY-MM-DD HH:mm:ss') : ''
						}
						guohuList(data).then((response) => {
							let list = response.data.list
							let outList = []
							list.forEach((item, index) => {
								outList.push({
									'管理部(分中心)': item.houseAdminName,
									'业务编号': item.gcode,
									'申请人': item.renter1,
									'房屋地址': item.addr,
									'合同编号': item.contractno,
									'产别': item.realway,
									'房管站核实时间':item.fgzmanagerdate?item.fgzmanagerdate.split(' ')[0]:'',
									'状态':item.state==-1?'区住建委退回':item.state==-2?'抽查不通过':item.state=='00'?'未提交':
									item.state==10?'数据录入完毕':item.state==20?'等待区住建委核查':item.state==40?'抽查通过':
									item.state==50?'区住建委核查通过':''
								})
							})
							
							// 获取表格数据
							const data = outList
							// 转换数据为工作表
							const worksheet = XLSX.utils.json_to_sheet(data)
							// 创建新的工作簿
							const workbook = XLSX.utils.book_new()
							// 将工作表添加到工作簿
							XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
							// 导出Excel文件
							XLSX.writeFile(workbook, '所资料.xlsx')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		},
	};
</script>
<style scoped>
	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.xinxi {
		display: flex;
		width: 800px;
	}

	.goufangContent {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		background-color: #F7F7F7;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}


	
	/dee/.el-date-editor {
		width: 120px !important;
	}
	
	/deep/.el-input__inner{
		width: 160px;
	}
	/deep/.publicpaginationview .el-input__inner{
		width: 100px;
	}
	/deep/.publicpaginationview .is-in-pagination .el-input__inner{
		width: 50px;
	}
</style>